<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Keen - Responsive Bootstrap Admin & Dashboard Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="description" content="Keen - Responsive Bootstrap Admin & Dashboard Template"/>
	<link rel="canonical" href="https://keenthemes.com"/>
	<meta property="og:locale" content="en_US"/>
	<meta property="og:type" content="website"/>
	<meta property="og:title" content="Premium Bootstrap Admin Templates"/>
	<meta property="og:description" content="Keen - Responsive Bootstrap Admin & Dashboard Template"/>
	<meta property="og:url" content="https://keenthemes.com/"/>
	<meta property="og:site_name" content="Keenthemes"/>
	<meta property="article:publisher" content="https://www.facebook.com/keenthemes"/>
	<meta name="twitter:card" content="summary_large_image"/>
	<meta name="twitter:description" content="Keen - Responsive Bootstrap Admin & Dashboard Template"/>
	<meta name="twitter:title" content="Premium Bootstrap Admin Templates"/>
	<meta name="twitter:domain" content="Keenthemes"/>

	<link rel="shortcut icon" href="assets/favicon.ico"/>

	<link href="assets/plugins/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"><link href="assets/style/flaticon.css" rel="stylesheet" type="text/css"><link href="assets/plugins/line-awesome/css/line-awesome.min.css" rel="stylesheet" type="text/css"><link href="assets/plugins/socicon/css/socicon.css" rel="stylesheet" type="text/css"><link href="assets/plugins/tether/dist/css/tether.min.css" rel="stylesheet" type="text/css"><link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" type="text/css"><link href="assets/plugins/owl.carousel/dist/assets/owl.carousel.css" rel="stylesheet" type="text/css"><link href="assets/plugins/owl.carousel/dist/assets/owl.theme.default.css" rel="stylesheet" type="text/css"><link href="assets/style/style.css" rel="stylesheet" type="text/css"><link href="assets/plugins/highlight.js/styles/railscasts.css" rel="stylesheet" type="text/css">	<script src="assets/plugins/jquery/dist/jquery.min.js" type="application/javascript"></script><script src="assets/plugins/tether/dist/js/tether.min.js" type="application/javascript"></script><script src="assets/plugins/popper.js/dist/umd/popper.min.js" type="application/javascript"></script><script src="assets/plugins/bootstrap/dist/js/bootstrap.js" type="application/javascript"></script><script src="assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.js" type="application/javascript"></script><script src="assets/plugins/owl.carousel/dist/owl.carousel.js" type="application/javascript"></script><script src="assets/js/custom.js" type="application/javascript"></script><script src="assets/plugins/highlight.js/lib/highlight.js" type="application/javascript"></script><script src="assets/plugins/highlight.js/build/highlight.pack.js" type="application/javascript"></script><script src="assets/js/docs.js" type="application/javascript"></script>
</head>
<body>
<div class="wrapper"><!-- wrapper -->

	<!-- section -->
<section class="section section--header">
    <header><!-- header -->
        <div class="content">
            <div class="header__handler">
                <div class="sidebar">
					<span class="hamburger">
						<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 129 129" enable-background="new 0 0 129 129" width="40px" height="40px">
							<g>
								<path d="m91.4,33.5h-53.8c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h53.9c2.3,0 4.1-1.8 4.1-4.1-0.1-2.3-1.9-4.1-4.2-4.1z" fill="#FFFFFF"/>
								<path d="m91.4,87.4h-53.8c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h53.9c2.3,0 4.1-1.8 4.1-4.1-0.1-2.3-1.9-4.1-4.2-4.1z" fill="#FFFFFF"/>
								<path d="m91.4,60.4h-53.8c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h53.9c2.3,0 4.1-1.8 4.1-4.1-0.1-2.3-1.9-4.1-4.2-4.1z" fill="#FFFFFF"/>
							</g>
						</svg>
					</span>
                    <div class="sidebar__menu_wrap">
                        <span class="sidebar__menu_close">x</span>
                        <ul class="sidebar__menu"><li class="sidebar__menu__item"><a href="index.html" target="" title="Preview"><span>Preview</span></a></li><li class="sidebar__menu__item active"><a href="docs.html" target="" title="Docs"><span>Docs</span></a></li><li class="sidebar__menu__item"><a href="video-tuts.html" target="" title="Video Tuts"><span>Video Tuts</span></a></li><li class="sidebar__menu__item"><a href="changelog.html" target="" title="Changelog"><span>Changelog</span></a></li><li class="sidebar__menu__item highlight"><a href="https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme/" target="_blank" title="Purchase"><span>Purchase</span></a></li></ul>                    </div>
                </div>
                <a href="https://keenthemes.com/keen" class="logo"><img src="assets/img/logo-keen.png" alt="Keen"></a>
            </div>
            <div class="header__references d-none d-md-block">
                <ul class="main__menu"><li class="main__menu__item"><a href="index.html" target="" title="Preview"><span>Preview</span></a></li><li class="main__menu__item active"><a href="docs.html" target="" title="Docs"><span>Docs</span></a></li><li class="main__menu__item"><a href="video-tuts.html" target="" title="Video Tuts"><span>Video Tuts</span></a></li><li class="main__menu__item"><a href="changelog.html" target="" title="Changelog"><span>Changelog</span></a></li><li class="main__menu__item highlight"><a href="https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme/" target="_blank" title="Purchase"><span>Purchase</span></a></li></ul>            </div>
        </div>
    </header><!-- header END -->

    <!-- content -->
<div class="content">
    <div class="sub-header">
        <h4 class="title"><span>Keen</span> - The Ultimate Multi-Demo Bootstrap Admin Theme</h4>
        <h4 class="sub-title">
        	The most complete UI/UX template solution for today's web projects of any size
        </h4>
    </div>
</div>
<!-- content END -->
</section>
<!-- section END -->

	<section class="section section--white section--padding"><!-- section -->
	<div id="docs" class="content">

		<div class="contents">
			<!-- contents -->

			<div class="doc-side-menu">
				<i class="la la-bars toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
				<div class="menu-list">
					<ul id="menu-content" class="menu-content collapse"><li class=""><a href="quick-start.html" >Quick Start</a></li><li class=""><a href="javascript:;" data-toggle="collapse" data-target="#a5c7a031968ec5" >Install<div class="arrow"></div></a><ul class="sub-menu collapse " id="a5c7a031968ec5"><li class=""><a href="classic-version.html">Classic Package</a></li><li class=""><a href="installation.html">Default Package</a></li></ul></li><li class=""><a href="demos.html" >Multi-Demo</a></li><li class=""><a href="files-structure.html" >Files Structure</a></li><li class=""><a href="build-tools.html" >Build Tools</a></li><li class="active"><a href="javascript:;" data-toggle="collapse" data-target="#a5c7a031968ed9" aria-expanded="true">Stylesheets<div class="arrow"></div></a><ul class="sub-menu collapse show" id="a5c7a031968ed9"><li class=""><a href="stylesheets.html">Overview</a></li><li class="active"><a href="sass-global.html">Global</a></li><li class=""><a href="sass-demo.html">Demo</a></li></ul></li><li class=""><a href="javascript:;" data-toggle="collapse" data-target="#a5c7a031968ee4" >Javascripts<div class="arrow"></div></a><ul class="sub-menu collapse " id="a5c7a031968ee4"><li class=""><a href="javascripts.html">Overview</a></li><li class=""><a href="js-global.html">Global</a></li><li class=""><a href="js-demo.html">Demo</a></li></ul></li><li class=""><a href="javascript:;" data-toggle="collapse" data-target="#a5c7a031968ef6" >Custom Plugins<div class="arrow"></div></a><ul class="sub-menu collapse " id="a5c7a031968ef6"><li class=""><a href="datatable.html">Keen Datatable</a></li><li class=""><a href="menu.html">Keen Menu</a></li><li class=""><a href="header.html">Keen Header</a></li><li class=""><a href="offcanvas.html">Keen Offcanvas</a></li><li class=""><a href="portlet.html">Keen Portlet</a></li><li class=""><a href="scrolltop.html">Keen Scrolltop</a></li><li class=""><a href="toggle.html">Keen Toggle</a></li><li class=""><a href="wizard.html">Keen Wizard</a></li></ul></li><li class=""><a href="rtl-version.html" >RTL Version</a></li><li class=""><a href="layout-builder.html" >Layout Builder</a></li><li class=""><a href="update.html" >Updates</a></li><li class=""><a href="backend-api.html" >Backend API</a></li><li class=""><a href="references.html" >References</a></li><li class=""><a href="security-notice.html" >Security Notice</a></li></ul>				</div>
			</div>

			<div class="contents__box contents__box--right">
				<!-- contents__box -->
				<div class="section">
	<h2 class="section-head">Global SASS</h2>
	<p>The Global SASS contains Keen's code framework and base components. The global scope is available for all demos.</p>


	<div class="space"></div>

	<h3 id="sec5-4" class="section-title">Global SASS Mixins</h3>
	<div class="section-content">
		<p>When you customize or code in Keen's SASS environment you can use Keen's globally available base mixins. 
			All available mixins can be found here:
			<code>[root]/theme/default/src/theme/framework/components/base/_mixins.scss</code>
		</p>
	</div>

	<div class="space"></div>

	<h3 id="sec5-5" class="section-title">Global SASS Functions</h3>
	<div class="section-content">
		<p>You can use Keen's globally available SASS functions in your custom codes. All available functions can be found here:
			<code>[root]/theme/default/src/theme/framework/lib/_functions.scss</code>
		</p>

		
		<p>
			Keen uses nested map list to structure the config options with special custom function
			<code>kt-get()</code> to access the nested config structure.
			You can access to an option by using
			<code>kt-get()</code> function as shown below:
		</p>

		<pre><code class="scss">transition: kt-get($kt-aside-config, base, minimize, transition);</code></pre>
	</div>

	
	<div class="space"></div>

	<h3 id="sec5-2" class="section-title">Global SASS Config</h3>
	<div class="section-content">
		<p>
			The demo's
			<code>style.scss</code> includes the entire framework stylesheets and compiles with its own layout and global settings <b>that allows overriding Keen frameworks base global settings</b>. 
			Thus each demo can customize
			and change the look and feel of the the entire theme components by overriding global config 
			<code>[root]/theme/default/src/theme/framework/_config.scss</code> in the demo's config 
			<code>[root]/theme/default/src/theme/demo/[demo_id]/sass/_config.scss</code>.
		</p>

	</div>

	<pre><code class="scss">//
// Global Framework Config
//

// Framework functions
@import "../../../../../framework/lib/functions";

// Framework mixins
@import "../../../../../framework/lib/mixins";
@import "../../../../../framework/components/vendors/perfect-scrollbar/mixins";
@import "../../../../../framework/components/foundation/burger-icon/mixins";
@import "../../../../../framework/components/foundation/menu/menu-horizontal-mixins";
@import "../../../../../framework/components/foundation/menu/menu-vertical-mixins";
@import "../../../../../framework/components/foundation/offcanvas/mixins";
@import "../../../../../framework/components/foundation/indicator/spinner/mixins";

// Theme mixins
@import "components/base/mixins";

// Layout Breakpoints(bootstrap responsive breakpoints)
// Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes, for use in media queries.
$kt-media-breakpoints: (
    // Extra small screen / phone
    xs: 0,

    // Small screen / phone
    sm: 576px,

    // Medium screen / tablet
    md: 768px,

    // Large screen / desktop
    lg: 1024px, //1024px,

    // Extra large screen / wide desktop
    xl: 1399px
) !default;

// Global rounded border mode
$kt-rounded: true !default;


// Border Radius
$kt-border-radius: 4px !default;

// Core icon codes(lineawesome icons: https://icons8.com/line-awesome)
$kt-action-icons: (
    close: '\f191',
    down: '\f110',
    up: '\f113',
    left: '\f111',
    right: '\f112',
    plus: '\f2c2',
    minus: '\f28e'
) !default;

// Elevate shadow
$kt-elevate-shadow: 0px 0px 13px 0px rgba(82,63,105,0.05);
$kt-elevate-shadow-2: 0px 0px 13px 0px rgba(82,63,105,0.1);

// Dropdown shadow
$kt-dropdown-shadow: 0px 0px 50px 0px rgba(82,63,105, 0.15);

// Custom scrollbar color
$kt-scroll-color: darken(#ebedf2, 6%);

// Transition
$kt-transition: all 0.3s !default;

// Modal Z-index
$kt-modal-zindex: 1050 !default;

// dropdown Z-index
$kt-dropdown-zindex: 95 !default;

// State Colors
// Brand colors
$kt-brand-color: #536be2 !default;
$kt-brand-inverse-color: #ffffff !default;

// State colors
$kt-state-colors: (
    // Keen states
    brand: (
        base: $kt-brand-color,
        inverse: $kt-brand-inverse-color
    ),
    metal: (
        base: #d3dae6,
        inverse: #586272
    ),
    light: (
        base: #ffffff,
        inverse: #282a3c
    ),
    dark: (
        base: lighten(#4c467a, 12%),
        inverse: #ffffff
    ),
    accent: (
        base: #00c5dc,
        inverse: #ffffff
    ),
    focus: (
        base: #9816f4,
        inverse: #ffffff
    ),

    // Bootstrap states
    primary: (
        base: #5867dd,
        inverse: #ffffff
    ),
    success: (
        base: #1dc9b7,
        inverse: #ffffff
    ),
    info: (
        base: #5578eb,
        inverse: #ffffff
    ),
    warning: (
        base: #ffb822,
        inverse: #111111
    ),
    danger: (
        base: #fd397a,
        inverse: #ffffff
    )
)!default;

// Base colors
$kt-base-colors: (
    label: (
        1: #c5cbe3,
        2: #a1a8c3,
        3: #646c9a,
        4: #3d4465
    ),
    shape: (
        1: #f0f3ff,
        2: #e8ecfa,
        3: #93a2dd,
        4: #646c9a
    ),
    grey: (
        1: #f7f8fa, //#f4f5f8
        2: #ebedf2,
        3: darken(#ebedf2, 3%),
        4: darken(#ebedf2, 6%)
    )
) !default;

// Root Font Settings
$kt-font-families: (
    regular: 'Poppins',
    heading: 'Poppins'
) !default;

// Root Font Settings
$kt-font-size: (
    size: (
        desktop: 13px,
        tablet: 12px,
        mobile: 12px
    ),
    weight: 300
) !default;

// General Link Settings
$kt-font-color: (
    text: #646c9a,
    link: (
        default: kt-state-color(brand),
        hover: darken(kt-state-color(brand), 6%)
    )
) !default;

// Portlet settings
$kt-portlet: (
    min-height: (
        default: (
            desktop: 60px,
            mobile: 50px
        ),
        lg: (
            desktop: 80px,
            mobile: 60px
        ),
        xl: (
            desktop: 100px,
            mobile: 80px
        )
    ),
    space: (
        desktop: 25px,
        mobile: 15px
    ),
    bottom-space: (
        desktop: 20px,
        mobile: 10px
    ),
    border-color: kt-base-color(grey, 2),
    bg-color: #ffffff,
    shadow: 0px 0px 30px 0px rgba(82,63,105,0.05)
);</code></pre>

	<div class="section-content">
		<table class="table-list">
			<thead>
			<tr>
				<th class="force-border">Variable</th>
				<th class="force-border">Description</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td nowrap><code>$kt-media-breakpoints</code></td>
				<td>Layout Breakpoints(bootstrap responsive breakpoints). Define the minimum and maximum dimensions at which your layout will change, adapting to different screen
					sizes, for use in media queries

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
                                <pre><code class="scss">$kt-media-breakpoints: (
    // Extra small screen / phone
    xs: 0,

    // Small screen / phone
    sm: 576px,

    // Medium screen / tablet
    md: 768px,

    // Large screen / desktop
    lg: 1024px, //1024px,

    // Extra large screen / wide desktop
    xl: 1399px
) !default;
</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>$kt-rounded</code></td>
				<td>Set global rounded border mode enable/disable.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="scss">$kt-rounded: true !default;</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>$kt-border-radius</code></td>
				<td>Set global border radius size.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="scss">$kt-border-radius: 4px !default;</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>$kt-action-icons</code></td>
				<td>Core icon codes(lineawesome icons: https://icons8.com/line-awesome)

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
                                <pre><code class="scss">$kt-action-icons: (
    close: '\f191',
    down: '\f110',
    up: '\f113',
    left: '\f111',
    right: '\f112',
    plus: '\f2c2',
    minus: '\f28e'
) !default;</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>$kt-elevate-shadow</code></td>
				<td>Elevate shadow CSS values

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
                                <pre><code class="scss">$kt-elevate-shadow: 0px 0px 13px 0px rgba(82,63,105,0.05);
$kt-elevate-shadow-2: 0px 0px 13px 0px rgba(82,63,105,0.1);</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>$kt-dropdown-shadow</code></td>
				<td>Dropdown shadow CSS values

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="scss">$kt-dropdown-shadow: 0px 0px 50px 0px rgba(82,63,105, 0.15);</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>$kt-scroll-color</code></td>
				<td>Custom scrollbar color

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="scss">$kt-scroll-color: darken(#ebedf2, 6%);</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>$kt-transition</code></td>
				<td>Set global transition.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="scss">$kt-transition: all 0.3s !default;</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>$kt-modal-zindex</code></td>
				<td>Set global modal z-index.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="scss">$kt-modal-zindex: 1050 !default;</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>$kt-dropdown-zindex</code></td>
				<td>Set global dropdown z-index.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="scss">$kt-dropdown-zindex: 95 !default;</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>$kt-brand-color</code></td>
				<td>Set global brand color.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="scss">$kt-brand-color: #536be2 !default;</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>$kt-brand-inverse-color</code></td>
				<td>Set global brand inverse color.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
								<pre><code class="scss">$kt-brand-inverse-color: #ffffff !default;</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>$kt-state-colors</code></td>
				<td>State colors of Keen and Bootstrap.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
                                <pre><code class="scss">$kt-state-colors: (
    // Keen states
    brand: (
        base: $kt-brand-color,
        inverse: $kt-brand-inverse-color
    ),
    metal: (
        base: #d3dae6,
        inverse: #586272
    ),
    light: (
        base: #ffffff,
        inverse: #282a3c
    ),
    dark: (
        base: lighten(#4c467a, 12%),
        inverse: #ffffff
    ),
    accent: (
        base: #00c5dc,
        inverse: #ffffff
    ),
    focus: (
        base: #9816f4,
        inverse: #ffffff
    ),

    // Bootstrap states
    primary: (
        base: #5867dd,
        inverse: #ffffff
    ),
    success: (
        base: #1dc9b7,
        inverse: #ffffff
    ),
    info: (
        base: #5578eb,
        inverse: #ffffff
    ),
    warning: (
        base: #ffb822,
        inverse: #111111
    ),
    danger: (
        base: #fd397a,
        inverse: #ffffff
    )
)!default;</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>$kt-base-colors</code></td>
				<td>Base colors.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
                                <pre><code class="scss">$kt-base-colors: (
    label: (
        1: #c5cbe3,
        2: #a1a8c3,
        3: #646c9a,
        4: #3d4465
    ),
    shape: (
        1: #f0f3ff,
        2: #e8ecfa,
        3: #93a2dd,
        4: #646c9a
    ),
    grey: (
        1: #f7f8fa, //#f4f5f8
        2: #ebedf2,
        3: darken(#ebedf2, 3%),
        4: darken(#ebedf2, 6%)
    )
) !default;</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>$kt-font-families</code></td>
				<td>Root font family list.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
                                <pre><code class="scss">$kt-font-families: (
    regular: 'Poppins',
    heading: 'Poppins'
) !default;</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>$kt-font-size</code></td>
				<td>Root font settings.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
                                <pre><code class="scss">$kt-font-size: (
    size: (
        desktop: 13px,
        tablet: 12px,
        mobile: 12px
    ),
    weight: 300
) !default;</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>$kt-font-color</code></td>
				<td>General link font settings.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
                                <pre><code class="scss">$kt-font-color: (
    text: #646c9a,
    link: (
        default: kt-state-color(brand),
        hover: darken(kt-state-color(brand), 6%)
    )
) !default;</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap><code>$kt-portlet</code></td>
				<td>Portlet settings.

					<div class="space"></div>

					<table class="table-list">
						<thead>
						<tr>
							<th class="force-border">Config</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>
                                <pre><code class="scss">$kt-portlet: (
    min-height: (
        default: (
            desktop: 60px,
            mobile: 50px
        ),
        lg: (
            desktop: 80px,
            mobile: 60px
        ),
        xl: (
            desktop: 100px,
            mobile: 80px
        )
    ),
    space: (
        desktop: 25px,
        mobile: 15px
    ),
    bottom-space: (
        desktop: 20px,
        mobile: 10px
    ),
    border-color: kt-base-color(grey, 2),
    bg-color: #ffffff,
    shadow: 0px 0px 30px 0px rgba(82,63,105,0.05)
);</code></pre>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			</tbody>
		</table>
	</div>
</div>			</div>
			<!-- contents END -->

		</div>
	</div>
</section><!-- section END -->

	
	<!-- section -->
	<section class="section section--bg-features shadow-top-inset">
		<div class="content"><!-- content -->
			<div class="row intro-header">
				<div class="desc">
					<h3 class="title">Keen’s Key Features</h3>
					<p class="text">
						Keen empowers your project with virtually limitless array of options<br> 
						to create endless unique projects.
					</p>
					<ul class="listing">
						<li><span class="bullet"></span>Based On <strong>Bootstrap 4.x</strong></li>
						<li><span class="bullet"></span><strong>Multi-Demo</strong> Concept</li>
						<li><span class="bullet"></span><strong>Enterprise Ready</strong> Architect</li>
						<li><span class="bullet"></span>Integrated Build Tools: <strong>Gulp, NPM, Yarn, SASS</strong></li>
						<li><span class="bullet"></span><strong>Full RTL</strong> Support</li>
						<li><span class="bullet"></span>Included <strong>Classic(without build tool) Version</strong></li>
						<li><span class="bullet"></span><strong>Enterprise Ready</strong> Core Framework</li>
						<li><span class="bullet"></span><strong>Full SASS</strong> Support</li>
						<li><span class="bullet"></span>Re-Usable <strong>Component System</strong></li>
						<li><span class="bullet"></span>And many more...</li>
					</ul>
				</div>
			</div>
		</div><!-- content END -->
	</section>
	<!-- section END -->

	<!-- section -->
	<section class="section section--white shadow-top">
		<div class="content content--padding">
			<div class="x-owl-carousel owl-theme" data-items="1" data-loop="1" data-autoplay="1" data-margin="30" data-responsive-Class="true" data-smart-Speed="3000" data-autoplay-Timeout="6000" data-transition-Style="fade">
				<div class="item">
					<blockquote class="blockquote">
						We truly hope that our love and dedication to produce an incredibly powerful high level solution suits all your project needs. We will continue to deliver incredible enterprise ready solutions for Angular, React and VueJS to serve you better. We sincerely hope you enjoyed using Keen as much as we enjoyed building it.
						<p class="blockquote__author">Sean,<span>&nbsp;&nbsp;Keenthemes Co-Author</span></p>
					</blockquote>
				</div>
			</div>
		</div>
	</section>
	<!-- section END -->


	<footer class="section section--bg-footer">
    <img src="assets/img/logo-keenthemes.png" alt="" >
    <form action="//keenthemes.us3.list-manage.com/subscribe/post?u=b10f23244c11e2946463ea844&amp;id=6998d1f883" method="post" id="mc-embedded-subscribe-form"
          name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div class="subscribe">
            <input type="email" name="EMAIL" placeholder="Enter your email to subscribe newsletter">
            <button type="submit" class="button button-subscribe" name="subscribe">Submit</button>
        </div>
    </form>

    <div class="socials">
        <a href="http://twitter.com/keenthemes" target="_blank"><i class="socicon-twitter"></i></a>
        <a href="https://dribbble.com/keenthemes" target="_blank"><i class="socicon-dribbble"></i></a>
        <a href="https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme/" target="_blank"><img class="img-fluid" src="assets/img/icon-bootstrap.png"></a>
    </div>
</footer>

</div><!-- wrapper END -->

</body>
</html>
